<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/layout">
<title layout:fragment="title">账单明细</title>
<body>
<div class="main-content" layout:fragment="content">
    <div class="breadcrumbs" id="breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i>
                <a th:href="@{/pmbill/paid/}">已缴账单</a>
            </li>
            <li class="active">明细</li>
        </ul>
    </div>
    <!-- .page-content -->
    <div class="page-content">
        <div class="col-sm-12">
            <h4 class="header blue ">账单总览</h4>
        </div>
        <div id="bill-view-div" class="form-horizontal">
            <input type="hidden" id="billId" th:value="${bill.id}">
            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 房号： </label>
                <div class="col-sm-9">
                    <input style="background-color: #fff!important;" type="text" name="houseNumber" readonly id="view-houseNumber" th:value="${bill.houseNumber}"
                           class="col-xs-10 col-sm-5 form-show"/>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 住户名称： </label>
                <div class="col-sm-9">
                    <input style="background-color: #fff!important;" type="text" name="userName" readonly id="view-userName" th:value="${bill.userName}"
                           class="col-xs-10 col-sm-5 form-show"/>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 手机号码： </label>
                <div class="col-sm-9">
                    <input style="background-color: #fff!important;" type="text" name="userMobile" readonly id="view-userMobile" th:value="${bill.userMobile}"
                           class="col-xs-10 col-sm-5 form-show"/>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 费用时间： </label>
                <div class="col-sm-9">
                    <input style="background-color: #fff!important;" type="text" name="duration" readonly id="view-duration" th:value="${bill.duration}"
                           class="col-xs-10 col-sm-5 form-show"/>
                </div>
            </div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 账单金额： </label>
                <div class="col-sm-9">
                    <input style="background-color: #fff!important;" type="number" name="totalAmount" readonly id="view-totalAmount" th:value="${bill.totalAmount}"
                           class="col-xs-10 col-sm-5 form-show"/>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 出账日期： </label>
                <div class="col-sm-9">
                    <input style="background-color: #fff!important;" type="text" readonly class="input-small col-xs-10 col-sm-5 form-show"
                           th:value="${bill.releaseTime != null ? #calendars.format(bill.releaseTime,'yyyy-MM-dd') : ''}" readonly="readonly"
                           name="releaseTime" id="view-releaseTime"/>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 下发日期： </label>
                <div class="col-sm-9">
                    <input style="background-color: #fff!important;" type="text" readonly class="input-small col-xs-10 col-sm-5 form-show"
                           th:value="${bill.publishTime != null ? #calendars.format(bill.publishTime,'yyyy-MM-dd') : ''}" readonly="readonly"
                           name="publishTime" id="view-publishTime"/>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 缴费状态： </label>
                <div class="col-sm-9">
                    <span class="label arrowed-in arrowed-in-right"
                          th:classappend="${bill.status == 1 ? 'label-success' : 'label-warning'}"
                          th:text="${bill.status == 1 ? '已缴费' : '待缴费'}"></span>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 备注： </label>
                <div class="col-sm-9">
                    <textarea name="remark" readonly id="view-remark" th:text="${bill.remark}" rows="5"
                              class="col-xs-10 col-sm-5 form-show"></textarea>
                </div>
            </div>
            <div class="space-4"></div>
        </div>

        <div class="col-sm-12">
            <h4 class="header blue ">缴费情况</h4>
        </div>
        <div id="pay-view-div" class="form-horizontal">
            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 缴费订单号： </label>
                <div class="col-sm-9">
                    <input style="background-color: #fff!important;" type="text" readonly id="view-payOrderNo" th:value="${bill.payOrderNo}"
                           class="col-xs-10 col-sm-5 form-show"/>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 缴费金额： </label>
                <div class="col-sm-9">
                    <input style="background-color: #fff!important;" type="number" readonly id="view-paidAmount" th:value="${bill.paidAmount}"
                           class="col-xs-10 col-sm-5 form-show"/>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 支付渠道： </label>
                <div class="col-sm-9">
                    <span class="label label-info arrowed-right arrowed-in">微信</span>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 缴费时间： </label>
                <div class="col-sm-9">
                    <input style="background-color: #fff!important;" type="number" readonly id="view-paidTime"
                           th:value="${bill.paidTime !=null ? #calendars.format(bill.paidTime, 'yyyy-MM-dd HH:mm:ss') : ''}"
                           class="col-xs-10 col-sm-5 form-show"/>
                </div>
            </div>
            <div class="space-4"></div>
        </div>

        <div class="col-sm-12">
            <h4 class="header blue ">费用明细</h4>
        </div>
        <div class="col-xs-12">
            <table id="dataTable" class="table table-bordered table-striped dataTable"
                   aria-describedby="tradeTable_info">
                <thead class="thin-border-bottom"></thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
<script layout:fragment="script" th:src="@{/assets/js/pmpaidbill/view.js}"></script>
</body>
</html>